<template>
  <div>
    <div style="height: 20px;border-left: 3px solid #0040ED">
      <div style="float: left;margin-left: 10px;font-size: 14px">
        <span>筛选条件</span>&nbsp;
        <i class="el-icon-setting" style="cursor: pointer" @click="openSelectDialog"></i>

        <el-drawer
            title="条件池"
            :visible.sync="searchPoolDrawer"
            :with-header="false">
          <div style="height: 40px;">
            <div style="margin-left: 20px;padding-top: 15px; ">
              <span style="font-size: 18px;">条件池</span>
            </div>
            <div style="border-bottom: 1px solid #E8F0F3;height: 5px">
            </div>
          </div>
          <div style="height: calc(100vh - 110px);margin-top: 10px">
            <el-checkbox v-for="field in searchContent" v-model="field.fieldCheck" :label="field.label" border size="small" style="margin-top: 10px;margin-left: 10px;"></el-checkbox>
          </div>
          <div style="border-bottom: 1px solid #E8F0F3;height: 5px">
          </div>
          <div style="bottom: 10px;float: right;margin-right: 20px;margin-top:5px">
            <el-button size="medium" @click="cancelSearchField">取消</el-button>
            <el-button size="medium" type="primary" @click="saveSearchField" :loading="saveLoading">保存</el-button>
          </div>
        </el-drawer>
      </div>

      <div style="float: right;cursor: pointer" @click="closeAndOpen">
        <i class="el-icon-caret-bottom" v-if="closeFlag"></i>
        <i class="el-icon-caret-top" v-if="!closeFlag"></i>
      </div>
    </div>

    <div style="margin-top: 10px" v-if="contentShow">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {addData,getUserData} from '@/api/userdata'
export default {
  props:{
    searchContent:Array,
    searchData:Object
  },
  components:{

  },
  data(){
    return {
      saveLoading:false,
      closeFlag: true,
      contentShow:true,
      searchPoolDrawer:false,
      nowSearchField:[],
    }
  },
  created(){
    this.getNowField();
  },

  methods:{
    async saveSearchField(){
      if(this.searchContent == null){
        return;
      }
      this.saveLoading = true;
      let fieldContent= [];
      for(let field of this.searchContent){
        if(field.fieldCheck){
          fieldContent.push(field.field);
        }
      }
      this.nowSearchField = fieldContent;
      this.searchData.content = JSON.stringify(fieldContent);
      let ret = await addData(this.searchData);
      if(ret.code === '200'){
        this.searchPoolDrawer = false;
        this.$emit('success',fieldContent);
        this.searchPoolDrawer = false;
      }
    },
    cancelSearchField(){
      this.searchPoolDrawer = false;
    },
    async getNowField(){
      let ret = await getUserData(this.searchData);
      if(ret.data != null && ret.data.content != null){
        this.nowSearchField = JSON.parse(ret.data.content);
        this.$emit('success', JSON.parse(ret.data.content));
      }else{
        let fieldContent= [];
        for(let field of this.searchContent){
          if(field.fieldCheck){
            fieldContent.push(field.field);
          }
        }
        this.$emit('success',fieldContent);
      }
    },
    closeAndOpen(){
      this.closeFlag = !this.closeFlag;
      this.contentShow = !this.contentShow;
    },
    openSelectDialog(){
      this.saveLoading = false;
      this.searchPoolDrawer = true;
      for(let field of this.searchContent){
        field.fieldCheck = false;
      }
      for(let field of this.nowSearchField){
        let index = this.searchContent.findIndex(item=>item.field === field);
        let item = this.searchContent[index];
        item.fieldCheck = true;
        this.$set(this.searchContent, index, item);
      }
    }

  }
}
</script>
<style lang="scss" scoped>

.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
</style>